body,div,p,h1,h2,h3{
    margin:0;
    padding:0;
}
html,body,#page{
    width:100%;
    height:100%;
    overflow: hidden;
}
#page{
    position: relative;
}
.canvas{
    background:#f2f2f2;
    margin:5px auto 0;
    position: relative;
}
.btnBar{
    width:1000px;
    margin:100px auto 0;
}
.btnBar .btn{
    padding:0.5em 1em;
    margin-right:5px;
    border-radius:0.5em;
    background:#f1f1f1;
    color:#999;
    font-size:14px;
    cursor: pointer;
    display: inline-block;
}
.btnBar .btn.clear{
    background:#ff8484;
    color:#fff;
}
.btnBar .btn.current{
    background:#00a2ff;
    color:#fff;
}
svg{
    user-select: none;
}
.editerWrap{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    position: absolute;
    left:0;
    top:0;
}
.editerWrap .main{
    background:#eee;
    padding:20px;
    width:80%;
    max-width:800px;
    min-width:300px;
    margin:100px auto;
    overflow: hidden;
    position: relative;
}
.editerWrap .close{
    position: absolute;
    right:20px;
    top:20px;
    width: 5em;
    height: 2em;
    line-height: 2em;
    font-size: 16px;
    font-style: normal;
    background: #939393;
    color: #fff;
    text-align: center;
    border-radius: 2em;
    cursor: pointer;
}
.editerWrap input{
    border:2px solid #ddd;
    background:#fff;
    border-radius:5px;
    height:32px;
    padding:0 1em;
    width:200px;
    outline: none;
    color:#0093d9;
}
.editerWrap input:focus{
    border:2px solid #5acaff;
}
.rlTitles{
    width:100%;
    height:200px;
    position: relative;
}
.rlTitles input{
    position:absolute;
    left:50%;
    top:50%;
}
.rlTitles .cc{
    position:absolute;
    left:50%;
    top:50%;
    margin:-30px 0 0 -30px;
    width:60px;
    height:60px;
    border-radius:30px;
    background: #a6d49e;
    color:#fff;
}
.rlTitles .cc i{
    font-style: normal;
    position: absolute;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    z-index: 2;
}
.rlTitles .cc::after{
    content:'';
    width:150%;
    height:0;
    border-top:2px solid #a6d49e;
    position: absolute;
    top:50%;
    left:-25%;
    overflow: hidden;
}
.rlTitles .cc::before{
    content:'';
    width:0;
    height:150%;
    border-left:2px solid #a6d49e;
    position: absolute;
    top:-25%;
    left:50%;
    overflow: hidden;
}
.pptWrap{
    width:1000px;
    margin:5px auto 0;
    position: relative;
}
.pptWrap .html{
    width:500px;
    height:300px;
    padding:20px;
    margin:5px auto;
    overflow: auto;
    border:2px solid #ddd;
}
.pptWrap .tit{
    font-size:14px;
    padding:0.5em 1em;
    border-radius:0.5em;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    background:#eef9ff;
    color:#00a2ff;
}
.pptWrap p.center{
    height:40px;
    overflow: hidden;
    text-align:center;
}
.pptWrap .tit2{
    top:220px;
    left:780px;
    margin-top:-2em;
    position: absolute;
}
.pptWrap .tit4{
    right:780px;
    top:220px;
    margin-top:-2em;
    position: absolute;
}